<template>
  <!-- 用户绑定角色 首页 -->
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="crud.status.cu > 0 && showBinding"
    :before-close="closeBind"
  >

    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="已授权用户" name="isBinded">
        <user-list v-if="permission && permission.has('SysRoleUser:query')" ref="isBindedCom" :bind-role-name="bindRoleName" :bind-role-id="bindRoleId" :is-binded="isBinded" @initdata="handleClick" />
        <span v-else>暂无权限</span>
      </el-tab-pane>
      <el-tab-pane label="未授权用户" name="unBind">
        <user-list v-if="permission && permission.has('SysRoleUser:query2')" ref="unBindCom" :bind-role-name="bindRoleName" :bind-role-id="bindRoleId" :is-binded="isBinded" @initdata="handleClick" />
        <span v-else>暂无权限</span>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import CRUD, { crud } from '@crud/crud'
import userList from './userList'
// 角色绑定用户 - model
export default {
  components: { userList },
  directives: { elDragDialog },
  mixins: [crud()],
  dicts: [
    'sys_user_create_type',
    'common_status'
  ], // 字典
  props: {
    showBinding: {
      type: Boolean,
      default: false
    },
    bindRoleId: {
      type: String,
      default: ''
    },
    bindRoleName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '角色授权用户',
      activeName: 'isBinded',
      inited: false,
      isBinded: true,
      permission: new Map()
    }
  },
  watch: {
    showBinding(n, o) {
      if (n) {
        this.title = this.bindRoleName + ':角色授权用户'
        if (this.isBinded) {
          if (this.$refs.isBindedCom) {
            this.inited = true
            this.$refs.isBindedCom.getUsersData(this.bindRoleId, this.bindRoleName, this.isBinded)
          }
        } else {
          this.$refs.unBindCom.getUsersData(this.bindRoleId, this.bindRoleName, this.isBinded)
        }
      }
    }
  },
  mounted() {
    this.permission = this.$store.state.menu.buttonPermission.get('SysRole')
    // console.log(this.$refs.isBindedCom)
  },
  methods: {
    [CRUD.HOOK.afterToCU]() {
      return true
    },
    closeBind() {
      this.title = '角色授权用户'
      this.$parent.showBinding = false
      this.$parent.selectRoleId = ''
      this.$parent.selectRoleName = ''
      // this.$refs.isBindedCom.selections = []
      // this.$refs.unBindCom.selections = []
      this.crud.cancelCU()
    },
    handleClick(tab) {
      if (tab.name === 'isBinded') {
        this.isBinded = true
        this.$refs.isBindedCom.getUsersData(this.bindRoleId, this.bindRoleName, this.isBinded)
      } else {
        this.isBinded = false
        this.$refs.unBindCom.getUsersData(this.bindRoleId, this.bindRoleName, this.isBinded)
      }
    }
  }
}
</script>

<style lang="scss" >
  .el-dialog__body{
    padding: 15px 20px;
  }
</style>
